<template>
  <div class="boxWidth" style="height: 1000px;">
    <FullCalendar style="float: left;width: 650px;margin-left: 30px" ref="myCalendar" :options="calendarOptions" />
    <el-transfer
        :titles="['未完成', '已完成']"
        style="float: left;margin-left: 20px"
        v-model="checked"
        @change="changeitems"
        :props="{
      key: 'value',
      label: 'desc'
    }"
        :data="transferData">
    </el-transfer>
    <el-button type="primary" style="float: left;margin-left: 280px" :disabled="disabled" @click="save">保存</el-button>
    <div class="jindu" style=" margin-left: 20px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);float: left;width: 580px;height: 300px;margin-top: 20px">

      <div style="margin-bottom: 20px">
        <span style="margin-left: 110px">今日进度</span>
        <span style="margin-left: 220px">总进度</span>
      </div>
      <el-progress type="circle" :percentage="todaySuccess" :status="status" style="margin-left: 80px;"></el-progress>
      <el-progress type="circle" :percentage="allSuccess" :status="statusAll" style="margin-left: 150px"></el-progress>
    </div>

  </div>
</template>



<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import listPlugin from '@fullcalendar/list'
import axios from "axios";
export default {
  name: "date_vue",
  components: {
    FullCalendar
  },
  data() {


    return {
      allNum:0,
      suNum:0,
      tableName: [], //数据表名
      transferData: [],
      checked: [],
      token:'',
      //初始化右侧穿梭器
      // value: [1, 4],
      //保存按钮是否可用
      disabled:true,
      //进度量
      allSuccess:75,
      todaySuccess:100,
      //进度样式
      status:null,
      statusAll:null,
      ent: {
        },
      calendarOptions: {
        plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin, listPlugin],
        // 默认为那个视图（月：dayGridMonth，周：timeGridWeek，日：timeGridDay）
        initialView: 'dayGridMonth',
        // 选择日期事件，可响应一个新建日程的事件
        select: this.handleDateSelect,
        // 点击事件对象事件
        eventClick: this.handleEventClick,
        // 点击删除标签事件 (这部分是在源码中添加的)
        eventClickDelete: this.eventClickDelete,
        // 切换语言，当前为中文
        locale: 'zh-cn',
        // 设置一周中显示的第一天是哪天，周日是0，周一是1，
        firstDay: 0,
        // 日历日程背景色
        eventColor: '#3BB2E3',
        // 设置事件的最小高度
        timeGridEventMinHeight: '20',
        // 设置日历单元格宽度与高度的比例。
        aspectRatio: 1.2,
        schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives', // 试用证书
        events: [
          {
            date:new Date(),
            title:'1'
          }
        ],
        // views: {
        // // 对应月视图
        //   dayGridMonth: {
        //     displayEventTime: false, // 是否显示时间
        //     dayCellContent(item) {
        //       const _date = formatDate(item.date).split('-')
        //       const _dateF = calenderFormate.solar2lunar(_date[0], _date[1], _date[2])
        //       return { html: `<p><label>${_dateF.cDay}</label><span>${_dateF.IDayCn}</span></p>` }
        //     }
        //   }

        // },
        // 时隙标签格式 ，确定将在时间段内显示的文本。
        slotLabelFormat: {
          hour: '2-digit',
          minute: '2-digit',
          meridiem: false,
          hour12: false // 设置时间为24小时
        },
        // // 日历头部按钮位置
        headerToolbar: {
          left: 'today',
          center: 'prev title next',
          right: 'dayGridMonth,timeGridWeek,listDay'
        },
        // 标题按钮的名字
        buttonText: {
          prev: '',
          next: '',
          today: '今天',
          month: '月视图',
          week: '周视图',
          day: '日视图',
          list: '列表视图'
        },
        editable: true, // 是否可以进行（拖动、缩放）修改
        allDaySlot: true, // 周，日视图时，all-day 不显示
        displayEventTime: true, // 是否显示时间
        eventLimit: true, // 设置月日程，与all-day slot的最大显示数量，超过的通过弹窗显示
        displayEventEnd: false, // 所有视图显示结束时间
        allowContextMenu: false,
        selectable: true, // 是否可以选中日历格
        selectMirror: true,
        dayMaxEvents: true,
        weekends: true,
        slotEventOverlap: false // 相同时间段的多个日程视觉上是否允许重叠，默认true允许
      }
    }
  },
  mounted() {
    this.getMyEchart()
    //通过用户id来获取该用户的计划
    this.find()
    this.autoAddEnvent2()
  },
  methods: {
    //find
    find(){
      this.token= localStorage.getItem("token");
      axios({
        method:'get',
        url:'http://localhost:8081/front/message',
        params:{
          token:this.token
        }
      }).then(res=>{
        const allData=res.data.data
        for(var i in allData){
          this.allNum++
          if(allData[i].msg_type=='Complete'){
            this.suNum++
          }
          this.calendarOptions.events.push({
            id:allData[i].id,
            title:allData[i].msg_content,
            start:allData[i].created_time,
            classNames: ['cal']
          })
          let date=new Date()
          let year='0'+(date.getMonth()+1).toString()
          let day='0'+date.getDate().toString()
          let time=(date.getFullYear() +'-'+((date.getMonth()+1)<10?year:(date.getMonth()+1)) +'-'+(date.getDate()<10?day:date.getDate()))
          if(time == allData[i].created_time.substring(0,10)){
            this.transferData.push({
              id:allData[i].id,
              value: i,
              desc: allData[i].msg_content,
            })
            if(allData[i].msg_type=='Complete'){
              this.checked.push(i)
            }
          }

        }
        this.jindutiao()
      })
    },
    //保存按钮
    save(){
      var realData=[]
      for(var i in this.transferData){
        if(i in this.checked){
          realData.push({
            id:this.transferData[i].id,
            msgType:'Complete'
          })
        }else{
          realData.push({
            id:this.transferData[i].id,
            msgType:'Unfinished'
          })
        }
      }

      console.log(realData)
      axios({
        method:'post',
        url:'http://localhost:8081/front/update/message/',
        data:realData,
        params:{
          token:this.token
        }
      })
      this.checked=[]
      this.calendarOptions.events=[]
      this.transferData=[]
      this.disabled=true
      this.$router.go(0)
    },
    changeitems(){
      this.disabled=false
    },
    //进度条
    jindutiao(){
      this.allSuccess=parseInt((((this.suNum)/this.allNum)*100).toString())
      this.todaySuccess=parseInt((((this.checked.length)/this.transferData.length)*100).toString())
      this.changeStatus()
    },
    //样式调节
    changeStatus(){
      if(this.todaySuccess>=100){
        this.status='success'
      }else{
        this.status=null
      }
      if(this.allSuccess>=100){
        this.statusAll='success'
      }else{
        this.statusAll=null
      }
      this.suNum=0
      this.allNum=0
    },
    handleDateClick: function(arg) {
      alert('date click! ' + arg.dateStr)
    },
    getMyEchart() {
      console.log('啥也没有')
    },
    autoAddEnvent2(){
      this.calendarOptions.events.push(this.ent)
    },
    // methods中定义相应的事件
    handleDateSelect(selectInfo) {

    },

    handleEventClick(clickInfo) {
      if (confirm(`确定删除吗 '${clickInfo.event.title}'`)) {
        clickInfo.event.remove()
        axios({
          method:'get',
          url:'http://localhost:8081/front/del/message/'+clickInfo.event.id,
          params:{
            token:this.token
          }
        }).then(res=>{
          this.calendarOptions.events=[]
          this.transferData=[]
          this.checked=[]
          this.find()
        })
      }
    }

  }

}
</script>

<style lang="scss">
.el-transfer-panel{
  height: 328px;
}
.fc-daygrid-event{
  .fc-daygrid-event-dot{
    display:none;
  }
  &.cal{
    padding-left:5px;
    color:#333;
    border-radius: 0;
    border:none;
    font-size: 12px;
    height: 30px;
    border-left: 2px solid #5289FF;
    background-color:#EEF3FF;
    .fc-event-title{
      color:#333;
    }
  }
  &.inv{
    padding-left:5px;
    color:#333;
    border-radius: 0;
    border:none;
    height: 30px;
    line-height: 16px;
    font-size: 16px;
    border-left: 2px solid #FFA327;
    background-color:#FFF6E9;
    .fc-event-title{
      color:#333;
    }
  }
}
.fc-timegrid-event{
  .fc-daygrid-event-dot{
    display:none;
  }
  &.cal{
    padding-left:5px;
    color:#333;
    height: 30px;
    font-size: 13px;
    border-radius: 0;
    border:none;
    border-left: 2px solid #5289FF;
    background-color:#EEF3FF;
    .fc-event-title{
      color:#333;
    }
  }
  &.inv{
    padding-left:5px;
    color:#333;
    border-radius: 0;
    border:none;
    height: 30px;
    line-height: 16px;
    font-size: 13px;
    border-left: 2px solid #FFA327;
    background-color:#FFF6E9;
    .fc-event-title{
      color:#333;
    }
  }
}
.fc .fc-toolbar-title{
  display: inline-block;
  vertical-align: middle;
}
.fc-theme-standard td{
  border-top-color:transparent;

}
</style>
